<template>
  <div class="app-container">
    <el-card>
      <el-row :gutter="20">
        <el-col
          :span="0"
          :xs="0"
        >
          <div class="h_left">
            <div class="label">访问账号</div>
            <div>您好！欢迎使用淄博市地方征信平台</div>
            <div>您上次的登录时间：2021-06-18</div>
            <div class="label"> <i class="el-icon-view"></i> 快速链接 </div>
            <div class="history">
              <el-timeline>
                <el-timeline-item
                  placement="bottom"
                  v-for="(item,index) in visitedViews"
                  :key="index"
                >
                  <el-card>
                    <h4>{{item.title}} - 淄博市地方征信平台</h4>
                    <p class="fr">于 {{item.ptime}} 访问</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </el-col>
        <el-col
          :span="24"
          :xs="24"
        >
          <div class="h_right">
            <div class="h_date f14">截止统计日期: {{new Date().toLocaleString()}}</div>
            <p style="fontWeight: '800';font-size: 20px;margin: 5px 0">不良贷款企业名单</p>
            <el-table
              :data="d4"
              style="width: 100%"
              border
              :header-cell-style="{background:'#f5f9ff'}"
            >
              <el-table-column
                type="index"
                label="序号"
                width="100"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{(currentPage - 1) * pageSize + scope.$index + 1}}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="QYMC"
                label="企业名称"
                min-width="15%"
                align="center"
              >
                <template slot-scope="scope">
                  <span
                    class="comName"
                    @click="openDetails(scope.row)"
                  >{{scope.row.QYMC}}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="SSQU"
                label="所属区域"
                min-width="10%"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="SSHY"
                label="所属行业"
                min-width="10%"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="count"
                label="贷款记录（条）"
                min-width="10%"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="sum"
                label="贷款余额（万元）"
                min-width="10%"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="seeNum"
                label="关注类贷款记录（条）"
                min-width="10%"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="gzlxdye"
                label="关注类贷款余额（万元）"
                min-width="10%"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="badNum"
                label="不良贷款记录（条）"
                min-width="10%"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="blxdye"
                label="不良贷款余额（万元）"
                min-width="10%"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="blxdyezb"
                label="不良贷款余额占比"
                min-width="10%"
                align="center"
              >
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-dialog
      title=""
      :visible.sync="openDialog"
      width="60%"
      center
    >
      <div
        class="message"
        v-if="Object.keys(dataList).length>0"
      >
        <div class="module">
          <el-tabs v-model="active">
            <el-tab-pane
              label="基本信息"
              name="first"
            >
              <table class="detailtable">
                <tr>
                  <td width="15%">企业名称</td>
                  <td>{{dataList.coInfo[0].QYMC}}</td>
                  <td width="15%">统一社会信用代码</td>
                  <td>{{dataList.coInfo[0].SHTYXYDM}}</td>
                </tr>
                <tr>
                  <td width="15%">法定代表人姓名</td>
                  <td>{{dataList.coInfo[0].FDDBR}}</td>
                  <td width="15%">联系电话</td>
                  <td>{{dataList.coInfo[0].DH}}</td>
                </tr>
                <tr>
                  <td width="15%">所属行业</td>
                  <td>{{dataList.coInfo[0].SSHY}}</td>
                  <td width="15%">所属区域</td>
                  <td>{{dataList.coInfo[0].SSQU}}</td>
                </tr>
                <tr>
                  <td width="15%">经营范围</td>
                  <td colspan="3">{{dataList.coInfo[0].JYFW}}</td>
                </tr>
              </table>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="module">
          <el-tabs v-model="active">
            <el-tab-pane
              label="股东信息"
              name="first"
            >
              <el-table
                :data="dataList.gdxx"
                style="width: 100%"
                border
                :header-cell-style="{background:'#f5f9ff'}"
              >
                <el-table-column
                  prop="GDXM"
                  label="股东名称"
                  min-width="10%"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="ZZGBBL"
                  label="持股比例"
                  min-width="10%"
                  align="center"
                >
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="module">
          <el-tabs v-model="active">
            <el-tab-pane
              label="高管信息"
              name="first"
            >
              <el-table
                :data="dataList.ggxx"
                style="width: 100%"
                border
                :header-cell-style="{background:'#f5f9ff'}"
              >
                <el-table-column
                  prop="xm"
                  label="姓名"
                  min-width="10%"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="zw"
                  label="职务"
                  min-width="10%"
                  align="center"
                >
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="module">
          <el-tabs v-model="active">
            <el-tab-pane
              label="贷款信息"
              name="first"
            >
              <el-table
                :data="dataList.xdxx"
                style="width: 100%"
                border
                :header-cell-style="{background:'#f5f9ff'}"
              >
                <el-table-column
                  prop="fiveLet"
                  label="贷款分类"
                  min-width="10%"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="count"
                  label="贷款记录（条）"
                  min-width="10%"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="sum"
                  label="贷款余额（万元）"
                  min-width="10%"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{((scope.row.sum)/10000).toFixed(2)}}
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import Chart from '@c/Charts/LineMarker'
import BarChart from '@c/Charts/BarChart'
import PieChart from '@c/Charts/PieChart.vue'
import MoreChart from '@c/Charts/MoreChart'
import MapChart from '@c/Charts/MapChart'
import { getBadMsg, getBadMsgInfo } from '@/api/chart'
export default {
  components: {
    MapChart,
    MoreChart,
    Chart,
    BarChart,
    PieChart,
  },
  data() {
    return {
      tabNum: '1',
      total: 0,
      currentPage: 1,
      pageSize: 10,
      d4: [],
      openDialog: false,
      active: 'first',
      dataList: {},
    }
  },
  created() {
    this.getData()
  },
  mounted() {},
  computed: {
    visitedViews() {
      return this.$store.state.tagsView.visitedViews
    },
  },
  methods: {
    handleClick(e) {
      // debugger
    },
    toFix(val) {
      return (val / 10000).toFixed(2)
    },
    getData() {
      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      }
      getBadMsg(params).then((res) => {
        this.total = Number(res.data.total)
        res.data.records.map((item) => {
          this.d4.push({
            QYMC: item.QYMC,
            SHTYXYDM: item.SHTYXYDM,
            SSHY: item.SSHY,
            SSQU: item.SSQU,
            badNum: item.badNum,
            blxdye: this.toFix(item.blxdye),
            count: item.count,
            gzlxdye: this.toFix(item.gzlxdye),
            seeNum: item.seeNum,
            sum: this.toFix(item.sum),
            blxdyezb: item.blxdye
              ? (item.blxdye / item.sum).toFixed(2) * 100 + '%'
              : item.blxdye,
          })
        })
      })
    },
    openDetails(row) {
      let params = {
        shtyxydm: row.SHTYXYDM,
      }
      ;(this.openDialog = false),
        getBadMsgInfo(params).then((res) => {
          this.openDialog = true
          this.dataList = res.data
        })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getData()
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
.border {
  border-left: 1px solid #797979;
}

.h_left {
  .label {
    font-size: 20px;
    font-weight: 600;
    line-height: 40px;
  }

  .history {
    .el-timeline {
      padding-left: 0;
      cursor: pointer;
    }

    /deep/ .el-card__body {
      padding: 10px;
    }
  }
}

.h_right {
  /deep/ .el-tabs__item {
    font-size: 20px;
    font-weight: 600;
  }

  .label {
    line-height: 40px;
  }

  .h_date {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
  }

  .chart-container {
    height: 450px;
    display: flex;
  }

  .data_label {
    margin-top: 15px;
    border-bottom: 1px solid #eaeaea;
  }
}
.el-table .cell .comName {
  color: #73a0fa;
  text-decoration: underline;
}
.el-table .cell .comName:hover {
  cursor: pointer;
}
.pagination {
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.detailtable {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: #e5e5e5 solid 1px;
}
.detailtable tr {
  width: 100%;
}
.detailtable td {
  padding: 8px 10px;
  text-align: center;
  line-height: 24px;
  font-size: 14px;
  color: #434343;
  border: #e5e5e5 solid 1px;
}
.detailtable td {
  font-weight: normal;
  background-color: #fff;
}
.detailtable td {
  word-break: break-all;
}
/deep/ .row {
  display: flex;
  justify-content: space-between;
}
</style>
